<template>
	<view>
		<view class="container">
			<view class="about-logo">
				<image src="../../../static/img/logo.png" class="logo-img"></image>
				<text class="logo-text">采招网</text>
			</view>
			<!-- <uni-list>
				<uni-list-item title="交流QQ" :showArrow="false">
					<template v-slot:right="">876261401</template>
				</uni-list-item>
				<uni-list-item title="版权所有" :showArrow="false">
					<template v-slot:right="">北京海诚通胜网络科技有限公司</template>
				</uni-list-item>
				<uni-list-item title="版本信息" :showArrow="false">
					<template v-slot:right="">V{{version}}</template>
				</uni-list-item>
			</uni-list> -->
			<view class="about-item">
				<view class="about-item-list">
					<view class="about-item-list-title">交流QQ</view>
					<view class="about-item-list-right" @click="qq('4008109688')">4008109688</view>
				</view>
				<view class="about-item-list">
					<view class="about-item-list-title">版权所有</view>
					<view class="about-item-list-right">北京海诚通胜网络科技有限公司</view>
				</view>
				<view class="about-item-list">
					<view class="about-item-list-title">版本信息</view>
					<view class="about-item-list-right">V{{version}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			// #ifdef APP-PLUS
			this.getVersion();
			// #endif
		},
		data() {
			return {
				version: '1',
			};
		},
		methods: {
			getVersion() {
				var that = this;
				plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
					that.version = wgtinfo.version;
				});
			},
			qq(e){
				// #ifdef APP-PLUS
				plus.runtime.openURL('mqq://im/chat?chat_type=wpa&uin=' + e + '&version=1&src_type=web');
				// #endif
			}
		}
	}
</script>

<style lang="scss">

	.about-logo {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx 0;

		.logo-img {
			width: 210rpx;
			height: 210rpx;
		}

		.logo-text {
			font-size: 40rpx;
			margin-top: 20rpx;
		}
	}
	.about-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		.about-item-list{
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			position: relative;
			.about-item-list-title{
				width: 30%;
				font-size: 34rpx;
			}
			.about-item-list-right{
				display: flex;
				flex: 1;
				font-size: 32rpx;
				justify-content: flex-end;
			}
		}
	}
	.about-item-list::after{
		position: absolute;
		    bottom: 0;
		    right: 0;
		    left: 0;
		    height: 1px;
		    content: '';
		    -webkit-transform: scaleY(0.5);
		    transform: scaleY(0.5);
		    background-color: #dfdddd;
	}
</style>
